<template>
	<custom-page :left-buttons="[]" :float="true" title="首页" nav-background-color="transparent" 
		borderBottomColor="transparent" backgroundColor="#F9F9FB">
		<template #page>
			<view class="page-content">
				<view class="top-layout" :style="{'backgroundImage': 'url('+asserts.ic_index_top_bg+')'}">
					<view class="photo-layout">
						<assistant-computed-info type="avatar3" :avatar="assistantInfo.sculptureUrl"></assistant-computed-info>
						<view class="center-row">
							<view class="user-name-row">
								<view class="user-name">{{assistantInfo.name}}</view>
								<image class="leave-img" :src="assistantInfo.picture"></image>
							</view>
							<assistant-computed-info type="state" :state="assistantInfo.orderReceivingState" :stateText="assistantInfo.orderReceivingStateDesc"></assistant-computed-info>
						</view>
						<image class="qr-code-img" :src="ftpUrl + '/ic_qr_code_bg.png'" @click="qrCodeClick"></image>
					</view>
					<view class="balance-view" @click="balanceClick">
						<view class="left-view">
							<view class="title">账户余额（元）</view>
							<view class="balance">{{walletInfo.totalAmount||0}}</view>
						</view>
						<view class="title2">钱包</view>
						<image class="right-image" :src="asserts.ic_arrow_right_white"></image>
					</view>
				</view>
				<view class="service-setting">
					<view class="title">服务设置</view>
					<view class="setting-row">
						<view class="setting-item left" @click="serviceTimeClick">
							<view class="item-content" :class="getWorkTimeCol(assistantInfo.businessHoursStart, assistantInfo.businessHoursEnd)">{{getWorkTime(assistantInfo.businessHoursStart, assistantInfo.businessHoursEnd)}}</view>
							<view class="item-title">服务时间</view>
						</view>
						<view class="setting-item right" @click="assistantStoreClick">
							<view class="item-content">{{assistantInfo.serviceStore}}</view>
							<view class="item-title">服务门店</view>
						</view>
					</view>
				</view>
				<view class="service-order">
					<view class="title-row" @click="mineOrderClick(0)">
						<view class="title">今日待处理</view>
						<view class="all">所有订单</view>
						<image class="img" :src="asserts.ic_arrow_right"></image>
					</view>
					<view class="item-row">
						<view class="order-item" @click="mineOrderClick(0)">
							<view class="num col1">{{assistantInfo.todayOrderPendingNumber || 0}}</view>
							<view>待接单</view>
						</view>
						<view class="order-item" @click="mineOrderClick(1)">
							<view class="num col2">{{assistantInfo.todayOrderMicroserviceNumber || 0}}</view>
							<view>待服务</view>
						</view>
						<view class="order-item" @click="mineOrderClick(2)">
							<view class="num col3">{{assistantInfo.todayOrderToEndNumber || 0}}</view>
							<view>服务中</view>
						</view>
						<view class="order-item" @click="mineOrderClick(5)">
							<view class="num col4">{{assistantInfo.todayOrderDenyNumber || 0}}</view>
							<view>拒绝订单</view>
						</view>
					</view>
				</view>
				<view :class="assistantInfo.orderReceivingState == 1?'btn-stop':'btn-receive'" @click="receiveClick">{{assistantInfo.orderReceivingState == 1?'停止接单':'开始接单'}}</view>
				<view class="contact-view"></view>
				<contact-service btnType="1"></contact-service>
			</view>
		</template>
		<template #popup>
			<assistant-qr-code-popup ref="qrCodePopup"></assistant-qr-code-popup>
			<!-- <assistant-receive-popup ref="qrCodePopup"></assistant-receive-popup> -->
			<app-update-popup ref="appUpdate"></app-update-popup>
		</template>
	</custom-page>
</template>

<script>
	import { getTimeMills, compareVersion } from '../../utils/utils'
	export default {
		data() {
			return {
				assistantInfo: {},
				walletInfo: {},
			}
		},
		computed: {
			getWorkTime(){
				return (start, end) => {
					if(start && end){
						return `${start}-${end}`
					}else{
						return '点击设置'
					}
				}
			},
			
			getWorkTimeCol(){
				return (start, end) => {
					if(start && end){
						return 'col_021'
					}else{
						return 'col_ff6'
					}
				}
			}
		},
		mounted() {
			this.getAssistantDetailToken()
			this.getUserWallet()
			
			// #ifdef APP-PLUS
			//版本更新
			this.updateApp()
			// #endif
		},
		methods: {
			//版本更新
			updateApp(){
				const systemInfo = uni.getSystemInfoSync();
				let appVersionCode = systemInfo.appVersion;
				this.requestCenter.getAppVersion().then(res => {
					if(compareVersion(res.appVersion, appVersionCode)>0){
						this.$refs.appUpdate.show()
					}
				})
			},
			
			//助教详情
			getAssistantDetailToken(){
				this.requestCenter.getAssistantDetailToken().then(res => {
					this.assistantInfo = res
				})
			},
			
			//点击二维码
			qrCodeClick(){
				this.$refs.qrCodePopup.show()
			},
			
			//我的钱包
			getUserWallet(){
				this.requestCenter.getUserWallet().then(res => {
					this.walletInfo = res
				})
			},
			
			//余额点击
			balanceClick(){
				uni.navigateTo({
					url: '/pages/mine-wallet/mine-wallet'
				})
			},
			
			//服务时间
			serviceTimeClick(){
				uni.navigateTo({
					url: '/pages/assistant-personal-file-edit/assistant-personal-file-edit?type=serviceTime',
					events: {
						personalEdit: (data)=> {
							this.getAssistantDetailToken()
						}
					}
				})
			},
			
			//助教门店
			assistantStoreClick(){
				uni.navigateTo({
					url: '/pages/assistant-store-list/assistant-store-list'
				})
			},
			
			//我的订单
			mineOrderClick(index){
				uni.navigateTo({
					url: '/pages/assistant-order-list/assistant-order-list?index=' + index
				})
			},
			
			//点击接单、停止接单
			receiveClick(){
				this.assistantInfo.birthdayTime = getTimeMills(this.assistantInfo.birthdayTime)
				if(this.assistantInfo.orderReceivingState == 0){
					if(!this.assistantInfo.businessHoursStart || !this.assistantInfo.businessHoursEnd){
						uni.showToast({
							title: "请设置服务时间",
							duration: 100,
							complete: () => {
								uni.navigateTo({
									url: '/pages/assistant-personal-info/assistant-personal-info'
								})
							}
						})
						return
					}
				}
				this.assistantInfo.orderReceivingState = (this.assistantInfo.orderReceivingState == 1)?0:1
				this.requestCenter.updateAssistantDetail(this.assistantInfo).then(res => {
					this.getAssistantDetailToken()
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top-layout{
		width: 100%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		/* #ifdef H5 */
		padding: 100rpx 32rpx 0 32rpx;
		/* #endif */
		/* #ifndef H5 */
		padding: 196rpx 32rpx 0 32rpx;
		height: 510rpx;
		/* #endif */
		box-sizing: border-box;
		position: relative;
		.photo-layout{
			display: flex;
			flex-direction: row;
			align-items: center;
			.center-row{
				flex: 1;
				display: flex;
				flex-direction: column;
				.user-name-row{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-left: 8rpx;
					margin-bottom: 8rpx;
					.user-name{
						color: #021624;
						font-size: 32rpx;
						font-weight: 500;
						line-height: 48rpx;
					}
					.leave-img{
						width: 113rpx;
						height: 40rpx;
						margin-left: 8rpx;
					}
				}
			}
			.qr-code-img{
				width: 64rpx;
				height: 64rpx;
				margin-right: 16rpx;
			}
		}
		.balance-view{
			width: 100%;
			height: 190rpx;
			margin-top: 32rpx;
			background-color: #01CBFF;
			border-radius: 16rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 32rpx;
			box-sizing: border-box;
			.left-view{
				flex: 1;
				display: flex;
				flex-direction: column;
				.title{
					font-size: 32rpx;
					color: #ECF7F9;
					line-height: 48rpx;
				}
				.balance{
					font-size: 48rpx;
					color: #FFFFFF;
					line-height: 32rpx;
					margin-top: 16rpx;
					font-weight: bold;
				}
				
			}
			.title2{
				font-size: 28rpx;
				color: #ECF7F9;
			}
			.right-image{
				width: 20rpx;
				height: 21rpx;
				margin-left: 16rpx;
			}
		}
	}
	.service-setting{
		width: calc(100% - 64rpx);
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx;
		box-sizing: border-box;
		margin-top: 16rpx;
		.title{
			font-size: 32rpx;
			line-height: 48rpx;
			color: #021624;
			font-weight: 500;
			margin-bottom: 32rpx;
		}
		.setting-row{
			display: flex;
			flex-direction: row;
			.left{
				background-color: #F8FDFD;
				margin-right: 22rpx;
			}
			.right{
				background-color: #FBFAFF;
			}
			.setting-item{
				flex: 1;
				height: 128rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				.item-title{
					font-size: 24rpx;
					color: #585F70;
					line-height: 48rpx;
				}
				.item-content{
					font-size: 36rpx;
					color: #021624;
					font-weight: 500;
					line-height: 48rpx;
					margin-bottom: 4rpx;
				}
			}
		}
	}
	.service-order {
		width: calc(100% - 64rpx);
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx;
		box-sizing: border-box;
		margin-top: 32rpx;
	
		.title-row {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 32rpx;
	
			.title {
				flex: 1;
				font-size: 32rpx;
				color: #021624;
				line-height: 48rpx;
				font-weight: 500;
			}
	
			.all {
				font-size: 28rpx;
				color: #ABAFB7;
				line-height: 44rpx;
				margin-right: 16rpx;
			}
	
			.img {
				width: 20rpx;
				height: 20rpx;
			}
		}
	
		.item-row {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			box-sizing: border-box;
			margin-top: 28rpx;
			.order-item {
				display: flex;
				flex-direction: column;
				font-size: 24rpx;
				color: #585F70;
				line-height: 48rpx;
				align-items: center;
				.num{
					font-size: 48rpx;
					line-height: 66rpx;
					font-weight: 500;
				}
				.col1{
					color: #04BC5C;
				}
				.col2{
					color: #01CBFF;
				}
				.col3{
					color: #F39C20;
				}
				.col4{
					color: #ED3C3D;
				}
			}
		}
	}
	.col_ff6{
		color: #FF6A3C !important;
	}
	.col_021{
		color: #021624 !important;
	}
	.btn-stop,
	.btn-receive{
		width: calc(100% - 64rpx);
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(1,203,255,0.05);
		border-radius: 16rpx;
		font-size: 32rpx;
		margin-top: 32rpx;
		color: #FFFFFF;
	}
	.btn-stop{
		background: #FF6A3C;
	}
	.btn-receive{
		background-color: #04BC5C;
	}
	
</style>
